<div class="row align-items-center justify-content-between">
  <div class="col-md-auto col-sm-auto">
    <div class="content-header mt-2">
      <h1>回收站</h1>
    </div>
  </div>
  <div class="col-md-auto col-sm-auto">
    <button class="btn btn-upload btn-danger" *ngIf="folders.length !== 0 || documents.length !== 0"
      (click)="removedAll()">
      <span class="material-icons-outlined">
        delete
      </span> 清空回收站
    </button>
  </div>
</div>
<div class="box box-primary">
  <div class="box-body">
    <div class="table-responsive" *ngIf="folders.length >0 || documents.length>0">
      <table class="table">
        <thead>
          <tr class="d-flex">
            <th class="col-7">名称</th>
            <th class="d-none d-md-inline-flex col-3" scope="col">删除时间</th>
            <th class="d-none d-md-inline-flex col-2">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let folder of folders" class="d-flex">
            <td class="col-10 col-md">
              <span *ngIf="!folder.isShared" class="material-icons folder_shared">
                folder
              </span>
              <span class="material-icons" *ngIf="folder.isShared">
                <span class="folder_shared">
                  <img src="/assets/images/folder-users.svg" class="shared-icon">
                </span>
              </span>
              {{folder.name | limitTo: 50}}
            </td>
            <td class="d-none d-md-inline-flex col-3">
              {{folder.deletedDate | date:"dd/MM/yyyy hh:mm a"}}
            </td>
            <td class="col-2">
              <button mat-icon-button color="primary" [matMenuTriggerFor]="documentMenu" aria-label="Menu">
                <mat-icon> more_horiz</mat-icon>
              </button>
              <mat-menu #documentMenu="matMenu">
                <button mat-menu-item (click)="restoreDeletedFolder(folder.id,folder.name)">
                  <mat-icon> restore_from_trash</mat-icon>
                  还原
                </button>
                <button mat-menu-item (click)="deleteFolder(folder.id,folder.name)">
                  <mat-icon> delete</mat-icon>
                  永久删除
                </button>
              </mat-menu>
            </td>
          </tr>
          <tr *ngFor="let document of documents" class="d-flex">
            <td class="col-10 col-md">
              <img [src]="document.thumbnailPath" alt="" class="mr-1">
              <span class="ml-2">
                {{document.name | limitTo: 50}}
              </span>
            </td>
            <td class="d-none d-md-inline-flex col-3">
              {{document.deletedDate | date:"dd/MM/yyyy hh:mm a"}}
            </td>
            <td class="col-2">
              <button mat-icon-button color="primary" [matMenuTriggerFor]="documentMenu" aria-label="Menu">
                <mat-icon> more_horiz</mat-icon>
              </button>
              <mat-menu #documentMenu="matMenu">
                <button mat-menu-item (click)="restoreDeletedDocument(document.id,document.name)">
                  <mat-icon> restore_from_trash</mat-icon>
                  还原
                </button>
                <button mat-menu-item (click)="deleteDocument(document.id,document.name)">
                  <mat-icon> delete</mat-icon>
                  永久删除
                </button>
              </mat-menu>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div *ngIf="folders.length == 0 && documents.length == 0" class="card border-primary text-center empty-folder mt-1">
      <div class="card-body">
        <div>
          <p>
            <span class="material-icons-outlined text-primary fa-5x" aria-hidden="true">
              auto_delete
            </span>
          </p>
          <h5 class="text-dark">
            空的回收站.
          </h5>
          <span>
            您没有任何已删除的文件.
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="loading-shade" *ngIf="isDocumentLoading || isFolderLoading">
  <mat-spinner></mat-spinner>
</div>
